<template>
  <el-cascader v-model="value" :props="calendarProps" clearable />
</template>

<script lang="ts" setup>
import { CascaderProps } from "element-plus";
import CityAPI, { CityListParams } from "@/api/system/city";

const value = defineModel<any[]>();

const props = defineProps({
  multiple: {
    type: Boolean,
    default: true,
  },
  emitPath: {
    type: Boolean,
    default: false,
  },
});

const calendarProps = computed<CascaderProps>(() => {
  return {
    multiple: props.multiple,
    lazy: true,
    checkStrictly: true,
    emitPath: props.emitPath,
    label: "name",
    value: "id",
    async lazyLoad(node, resolve) {
      const { level } = node;
      const params: CityListParams = {};
      if (node.data?.id) {
        params.parent_id = node.data.id as number;
      }
      const nodes = await handleFetchData(params);
      resolve(nodes?.map((i) => ({ ...i, leaf: level === 2 })));
    },
  };
});

async function handleFetchData(params: CityListParams = {}) {
  const response = await CityAPI.getCityList(params);
  if (response) {
    return response;
  }
}
</script>

<style lang="scss"></style>
